<template>
  <div>
    <a-modal
      title="上传升级包"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <!-- 选择升级类型 -->
      <a-form
        :form="form"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="选择升级类型">
          <a-select
            v-decorator="[
              'gender',
              {
                rules: [{ required: true, message: '请选择升级类型' }],
              },
            ]"
            placeholder="请选择"
            @change="handleSelectChange"
          >
            <a-select-option value="底座">
              底座
            </a-select-option>
            <a-select-option value="感知应用">
              感知应用
            </a-select-option>
            <a-select-option value="大算力应用">
              大算力应用
            </a-select-option>
            <a-select-option value="信号应用">
              信号应用
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- 需要判断是否必传 -->
        <a-form-item
          label="上传升级文件"
          v-if="updataType === '' ? false : true"
        >
          <a-upload
            :file-list="fileList"
            :before-upload="beforeUpload"
            @change="handleChange"
            list-type="text"
            v-decorator="[
              'file',
              {
                rules: [{ required: true, message: '请选择上传升级文件' }],
              },
            ]"
          >
            <a-button> <a-icon type="upload" />选择文件 </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="上传MD5配置文件"
          v-if="updataType === '' ? false : true"
        >
          <a-upload
            :file-list="fileList2"
            :before-upload="beforeUpload2"
            @change="handleChange2"
            list-type="text"
          >
            <a-button> <a-icon type="upload" />选择文件 </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="自动复位主机"
          v-if="updataType === '感知应用' || updataType === '信号应用'"
        >
          <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
        </a-form-item>
      </a-form>
      <div class="loading-box" v-show="loading">
        <a-spin tip="文件上传中"> </a-spin>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  postUpgradeDizuo,
  postUpgradeSignal,
  postUpgradeAi,
  postUpgradeDasuanli,
} from '../../services/user';
export default {
  props: {
    starlinkIds: Array,
  },
  data() {
    return {
      visible: true,
      confirmLoading: false,
      updataType: '',
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      fileList: [],
      fileList2: [],
      loading: false,
    };
  },
  methods: {
    handleChange(obj) {
      console.log('上传文件发生变化', obj);
      this.fileList = obj.fileList;
    },
    handleChange2(obj) {
      console.log('上传文件发生变化');
      this.fileList2 = obj.fileList;
    },
    handleOk() {
      this.handleSubmit();
    },
    handleCancel() {
      this.$emit('closeUpdate');
    },
    handleSelectChange(e) {
      // 切换当前页面的模式
      console.log(e);
      console.log(this.form);
      this.updataType = e;
      // this.updataType
    },
    beforeUpload(file) {
      // 将文件上传至缓存 后 添加至表单
      // this.fileList = [...this.fileList, file];
      console.log(' 添加至表单', file);
      return false;
    },
    beforeUpload2() {
      // 将文件上传至缓存 后 添加至表单
      // this.fileList2 = [...this.fileList2, file];
      // console.log(this.fileList2);
      return false;
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          let dataParams = {};
          dataParams.starlinklist = this.starlinkIds;
          dataParams.operator = this.$store.state.account.userObj.name;
          let form = new FormData();
          form.append('requestId', parseInt(new Date().getTime() / 1000));
          // md5 已上传文件
          if (this.fileList2[0]) {
            form.append('md5', this.fileList2[0].originFileObj);
          }
          form.append('data', '[' + JSON.stringify(dataParams) + ']');
          this.loading = true;
          switch (this.updataType) {
            case '底座':
              // 底座
              form.append('dizuo', this.fileList[0].originFileObj);
              postUpgradeDizuo(form).then(this.affterPost);
              break;

            case '大算力应用':
              // 大算力
              form.append('dasuanli', this.fileList[0].originFileObj);
              postUpgradeDasuanli(form).then(this.affterPost);
              break;
            case '感知应用':
              // 需要循环
              this.fileList.forEach((item) => {
                form.append(item.name, item.originFileObj);
              });
              // 感知
              postUpgradeAi(form).then(this.affterPost);
              break;
            case '信号应用':
              // 大算力
              this.fileList.forEach((item) => {
                form.append(item.name, item.originFileObj);
              });
              postUpgradeSignal(form).then(this.affterPost);
              break;
          }
        } else {
          console.log('表单有问题');
        }
      });
      //
    },
    affterPost(res) {
      // 关闭loading
      this.loading = false;
      if (res.data.success) {
        this.$message.success(res.data.message);
        this.$emit('closeUpdate');
      } else {
        this.$message.error(res.data.affterPost);
      }
    },
  },
};
</script>

<style scoped>
.loading-box {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
  text-align: center;
  color: #333;
}
</style>
